<template>
  <div class="material">
    <!-- 素材管理 -->
    <el-card class="card" shadow="always" :body-style="{ padding: '20px' }">
      <div slot="header">
        <el-upload
          class="upload-demo"
          action="/lejuAdmin/material/uploadFileOssSave"
          :headers="{token}"
          :on-success="handleSuccess"
        >
          <el-button size="small" type="primary">点击上传</el-button>
          <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
        </el-upload>
      </div>
      <!-- card body -->
      <el-row v-loading="loading" :gutter="20">
        <el-col v-for="item in list" :key="item.id" :span="24" :offset="0" style="margin-bottom:10px; width:20%">
          <el-card shadow="hover" :body-style="{ padding: '20px' }">
            <div slot="header">
              <span>创建时间:{{ item.createTime }}</span>
            </div>
            <img class="img" :src="item.ossUrl" alt="">
            <div class="flexRight">
              <el-button class="btn" size="mini" type="danger" @click="del(item)">删除</el-button>
            </div>
          </el-card>
        </el-col>
      </el-row>

      <el-pagination
        v-if="total"
        :current-page="pages.start"
        :page-sizes="pages.pageSizes"
        :page-size="100"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </el-card>

  </div>
</template>

<script>
import { getToken } from '@/utils/MyAuth'
import { findMaterialByPage, delMaterial } from '@/api/content/material/index'
export default {
  name: '',
  data() {
    return {
      msg: '',
      pages: {
        start: 1,
        limit: 5,
        pageSizes: [5, 10, 15, 20]
      },
      list: [], // 素材列表
      total: '',
      MatImg: {}, // 上传图片返回对象
      loading: false
    }
  },
  computed: {
    token() {
      return getToken()
    }
  },
  mounted() {

  },
  created() {
    this.init()
  },
  methods: {
    init() {
      this.loading = true
      findMaterialByPage(this.pages.start, this.pages.limit).then(res => {
        console.log(res)
        const { data, message: errMsg, success } = res
        if (success) {
          const { rows, total } = data
          this.list = rows // 获取列表数据
          this.total = total // 获取列表总长度
        } else {
          this.$message.error(errMsg)
        }
        this.loading = false
      })
    },
    // 上传素材
    handleSuccess(response, file, fileList) {
      console.log(response)
      const { data, message: errMag, success } = response
      if (success) {
        const { material } = data.material
        this.MatImg = material
        // 刷新列表
        this.init()
      } else {
        this.$message.error(errMag)
      }
    },
    // 删除素材
    del(val) {
      const { id } = val
      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        delMaterial(id).then(res => {
          console.log(res)
          const { message: errMsg, success } = res
          if (success) {
            this.$message({
              message: '删除成功',
              type: 'success'
            })
          } else {
            this.$message.error(errMsg)
          }
          this.init()
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    },
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`)
      this.pages.limit = val
      this.init()
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`)
      this.pages.start = val
      this.init()
    }
  }
}
</script>

<style scoped lang="scss">
.material{
  .card{
    margin: 30px;
    .img{
      width: 100%;
      height: 250px;
    }
    .flexRight{
      display: flex;
      flex-direction: row-reverse;
      .btn{
        width: 90px;
        margin-top: 20px;
      }
    }
  }

}
</style>
